$font:normal 14px "Microsoft YaHei";
body{
    font:$font;
}
@mixin box{
    width:100%;
    margin:0 auto;
}
.mallIntroduce{
    @include box;
    background:#f4f4f4;
    border-radius:10px 10px 0 0;
    h1,h2{
        margin:0;
        padding:15px 0 0 15px;
    }
    p{
        padding:5px 15px 25px 15px;
        margin-bottom:0;
    }
}

.nav{
    @include box;
    height:40px;
    line-height:40px;
    padding:0;
    background: linear-gradient(to bottom,#999,#ddd);
    ul{
        padding:0;
        margin:0;
    }
    li{
        list-style-type:none;
        height:40px;
    }
    a{
        text-decoration:none;
    }
    >ul{

        &:after{
            display:block;
            content:"";
            clear:both;
        }
        >li{
            min-width:100px;
            float:left;
            text-align:center;
            &:hover{
                >ul{
                    display:block;
                }
            }
            >ul{
                display:none;
                li{
                    background: #eee;
                }
                position:relative;
                left:0;
                >li{
                    position:relative;
                    min-width:100px;
                    text-align:center;
                    &:hover{
                        >ul{
                            display:block;
                        }
                    }
                    >ul{
                        display:none;
                        position:absolute;
                        top:0;
                        left:100px;
                        >li{
                            min-width:100px;
                            text-align:left;
                            padding-left:5px;
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width:767px){
        height:auto;
        >ul{
            display:block;
            >li{
                float:none;
                background:linear-gradient(to left,#ddd,#999);
                >ul{
                    >li{
                        >ul{
                            position:relative;
                            left:0;
                            top:0;
                            li{
                                text-align:center;
                                background:#f4f4f4;
                            }
                        }
                    }
                }
            }

        }
    }
}

.main{
    padding:15px;
    display:flex;
    flex-flow:row wrap;
    .project{
        flex:none;
        width:150px;
        height:180px;
        margin-bottom:10px;
        margin-left:10px;
        border:1px solid #ddd;
        background:#f4f4f4;
        text-align:center;
        img{
            max-width:140px;
            height:120px;
            margin:5px;
        }
        h3{
            margin:0 5px;
            font-size:14px;
            //font-weight:normal;
            text-align:left;
        }
        p{
            text-align:left;
            margin:5px 0;
            span{
                padding:0 5px;
            }
            i{
                padding-right:5px;
                text-decoration:line-through;
                font-size:12px;
                float:right
            }
        }
    }
    @media screen and (max-width:767px){
        .project{
            flex:auto;
        }
    }
}

footer{
    p{
        text-align:center
    }
}
